import React, { useEffect, useState } from "react";
import Headers from '../../compoents/Header'
import './index.scss';
import instance from "../../utlis";
import { Button, Divider, Radio, Space, Table ,Badge} from 'antd';
import type { TableColumnsType } from 'antd';
interface DataType {
  key: React.Key;
  name: string;
  age: number;
  address: string;
}

const columns: TableColumnsType<DataType> = [
  {
    title: '状态',
    dataIndex: 'name',
    key:'1',
    render: (statu) => <Badge status="success" text={statu ? "通过" : '未通过'} />
   
  },
  {
    title: '称呼',
    dataIndex: 'htmlContent',
     key:'2',
  },
  {
    title: '联系方式',
    dataIndex: 'relation',
     key:'3',
  },
   {
    title: '原始内容',
    dataIndex: 'preContent',
     key:'4',
  },
   {
    title: 'HTML 内容',
    dataIndex: 'address',
     key:'5',
  },
   {
    title: '管理文章',
    dataIndex: 'address',
     key:'6',
  },
   {
    title: '创建时间',
    dataIndex: 'date',
     key:'7',
  },
   {
    title: '操作',
    dataIndex: 'address',
     key:'8',
      render: () => (
        <Space>
            <Button>编辑</Button>
            <Button>拒接</Button>
            <Button>回复</Button>
            <Button>删除</Button>
        </Space>
      )
  },
];

const data: DataType[] = [
  {
    key: '1',
    name: 'John Brown',
    age: 32,
    address: 'New York No. 1 Lake Park',
  },
  {
    key: '2',
    name: 'Jim Green',
    age: 42,
    address: 'London No. 1 Lake Park',
  },
  {
    key: '3',
    name: 'Joe Black',
    age: 32,
    address: 'Sydney No. 1 Lake Park',
  },
  {
    key: '4',
    name: 'Disabled User',
    age: 99,
    address: 'Sydney No. 1 Lake Park',
  },
];

// rowSelection object indicates the need for row selection
const rowSelection = {
  onChange: (selectedRowKeys: React.Key[], selectedRows: DataType[]) => {
  },
  getCheckboxProps: (record: DataType) => ({
    disabled: record.name === 'Disabled User', // Column configuration not to be checked
    name: record.name,
  }),
};
const Index:React.FC=()=>{
      const text = '评论管理'
      const [tabList,setTabList] = useState([])
      const [selectionType, setSelectionType] = useState<'checkbox' | 'radio'>('checkbox');
      const gettabList = async()=>{
        try {
              const config ={
                url:'/api/get_message',
                method:'get'
           }
            const res = await instance(config)
            console.log(res)
            const {data}  =res
            setTabList(data.data)
        } catch (error) {
            
        }
         
      }
      useEffect(()=>{
        gettabList()
      },[])
    return(
        <div className="container">
            <Headers text={text}></Headers> 
            <div className="content">
                 <div className="content-top" >
                          <div style={{display:'flex'}}>
                            <p>标题</p>
                            <input type="text" placeholder="请输入文章标题" />
                          </div>

                           <div>
                            <p>分类</p>
                             <select name="" id="">
                                <option value="">请选择</option>
                                <option value="">草稿</option>
                                <option value="">发布</option>
                            </select>
                           </div>
                        
                            <div>
                                <p>分类</p>
                              <select name="" id="">
                                 <option value="">请选择</option>
                                <option value=""></option>
                            </select>     
                           </div>     
                           <div>
                             <button className="search">搜索</button> 
                             <button className="reset">重置</button>
                            </div>     
                </div>
                <div className="tabList">
                      <Radio.Group
                        onChange={({ target: { value } }) => {
                        setSelectionType(value);
                        }}
                        value={selectionType}
                    >
                    </Radio.Group>

                    <Divider />

                    <Table
                        rowSelection={{
                        type: selectionType,
                        ...rowSelection,
                        }}
                        columns={columns}
                        dataSource={tabList}
                    />
                </div>
            </div>
        </div>
    )
}
export default Index